1時間プログラミング 008 標準入力から受け取ったコードを、シンタックスハイライトを適用した画像に変換するコマンド
概要
標準入力から受け取ったコードを、シンタックスハイライトを適用した画像に変換するコマンド
所要時間: 1時間
使い方
code:terminal
$ cat sample/factorial.js | node index.js
$ open image.png
https://raw.githubusercontent.com/emanon001/1hour/main/008-syntax-highlight-img/highlight.png
実装
コード → シンタックスハイライトした結果のHTML → 画像という変換フローを考えている
まずコードを標準入力から受け取る
code:js
import process from 'process';
import { readFileSync } from 'fs';
/**
* 標準入力から文字列を読み込む
* @return {string}
*/
const readInput = () => {
return readFileSync(process.stdin.fd, 'utf8');
};
const code = readInput();
のNode.js on the Serverを参照 code:js
import hljs from 'highlight.js';
const code = '...';
const html = hljs.highlightAuto(code).value
hljs.highlightAuto(code)の結果はHTMLの部品なので、以下のようにHTMLを組み立てる
code:js
/**
* HTMLを作成する
* @param {string} highlight
* @return {string}
*/
const buildHtml = (highlight) => {
return `
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>hljs.highlightAll();</script>
</head>
<body>
<pre><code>${highlight}</code></pre>
</body>
</html>`;
};
const html = buildHtml(hljs.highlightAuto(code).value);
code:js
import nodeHtmlToImage from 'node-html-to-image';
// 省略
nodeHtmlToImage({
output: './image.png',
html,
}).then(() => {
console.log('The image was created successfully');
});
https://raw.githubusercontent.com/emanon001/1hour/main/008-syntax-highlight-img/highlight.png
感想
ライブラリがすでに存在しているので、それを繋ぎこむだけだった
お題の選択肢が少なくなるので、コマンドライン縛りはなくした方がいいかも